<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="-1">
    <link rel="shortcut icon" href="favicon.png">
    <link rel="icon" href="favicon.png">
    <title>ASUS Wireless Router Lyra - WAN / LAN 带宽监控</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="index_style.css">
    <link rel="stylesheet" type="text/css" href="form_style.css">
    <link rel="stylesheet" type="text/css" href="usp_style.css">
    <link rel="stylesheet" type="text/css" href="device-map.css">
    <link rel="stylesheet" type="text/css" href="notification.css">
    <link rel="stylesheet" href="asus_eula.css" type="text/css">
    <script src="jquery.js"></script>
</head>
<body style="">
<div id="TopBanner">
    <form method="post" name="titleForm" id="titleForm" action="http://router.asus.com/start_apply.htm"
          target="hidden_frame"></form>
    <form method="post" name="diskForm_title" action="http://router.asus.com/device-map/safely_remove_disk.asp"
          target="hidden_frame"></form>
    <form method="post" name="noti_ftp" action="http://router.asus.com/aidisk/switch_share_mode.asp"
          target="hidden_frame"></form>
    <form method="post" name="noti_samba" action="http://router.asus.com/aidisk/switch_share_mode.asp"
          target="hidden_frame"></form>
    <form method="post" name="noti_experience_Feedback" action="http://router.asus.com/start_apply.htm"
          target="hidden_frame"></form>
    <form method="post" name="noti_notif_hint" action="http://router.asus.com/start_apply.htm"
          target="hidden_frame"></form>
    <form method="post" name="internetForm_title" action="http://router.asus.com/start_apply2.htm"
          target="hidden_frame"></form>
    <form method="post" name="rebootForm" action="http://router.asus.com/apply.cgi" target="hidden_frame"></form>
    <form method="post" name="canceldiagForm" action="http://router.asus.com/apply.cgi" target="hidden_frame"></form>
    <form method="post" name="canceldblogForm" action="http://router.asus.com/apply.cgi" target="hidden_frame"></form>
    <form method="post" name="qosDisableForm" action="http://router.asus.com/start_apply.htm"
          target="hidden_frame"></form>
    <div class="banner1" align="center"><img src="asustitle.png" width="218" height="54" align="left">
        <div style="margin-top:13px;margin-left:-90px;*margin-top:0px;*margin-left:0px;" align="center"><span
                id="modelName_top" class="modelName_top">Lyra</span></div>
        <a>
            <div style="margin-top:13px;margin-left:25px; *width:136px;" class="titlebtn" align="center"><span>注销</span>
            </div>
        </a><a>
            <div style="margin-top:13px;margin-left:0px;*width:136px;" class="titlebtn" align="center"><span>重新启动</span>
            </div>
        </a>
        <ul class="navigation">
            <li>
                <dl><a href="http://router.asus.com/AdaptiveQoS_Bandwidth_Monitor.asp#">
                    <dt id="selected_lang">简体中文</dt>
                </a>
                    <dd><a id="EN">English</a></dd>
                    <dd><a id="BR">Português(Brazil)</a></dd>
                    <dd><a id="CZ">Česky</a></dd>
                    <dd><a id="DE">Deutsch</a></dd>
                    <dd><a id="ES">Español</a></dd>
                    <dd><a id="FR">Français</a></dd>
                    <dd><a id="HU">Hungarian</a></dd>
                    <dd><a id="IT">Italiano</a></dd>
                    <dd><a id="JP">日本語</a></dd>
                    <dd><a id="KR">한국어</a></dd>
                    <dd><a id="MS">Malay</a></dd>
                    <dd><a id="NL">Nederlands</a></dd>
                    <dd><a id="PL">Polski</a></dd>
                    <dd><a id="RO">Romanian</a></dd>
                    <dd><a id="RU">Pусский</a></dd>
                    <dd><a id="SL">Slovenščina</a></dd>
                    <dd><a id="TH">ไทย</a></dd>
                    <dd><a id="TR">Türkçe</a></dd>
                    <dd><a id="TW">繁體中文</a></dd>
                    <dd><a id="UK">Український</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <table width="998" border="0" align="center" cellpadding="0" cellspacing="0" class="statusBar">
        <tbody>
        <tr>
            <td class="minup_bg" height="179" valign="top">
                <table width="764" border="0" cellpadding="0" cellspacing="0" height="35px" style="margin-left:230px;">
                    <tbody>
                    <tr>
                        <td valign="center" class="titledown" width="auto"><span
                                style="font-family:Verdana, Arial, Helvetica, sans-serif;">固件版本：<a
                                href="http://router.asus.com/Advanced_FirmwareUpgrade_Content.asp" style="color:white;"><span
                                id="firmver" class="title_link">9.0.0.4.384_46629</span></a></span>
                        </td>
                        <td id="dblog_diag_status_td" style="width: 0px;">
                            <div id="dblog_diag_status" class="dblogdiag" style="display: none;"></div>
                        </td>
                        <td width="30" id="notification_status1" class="notificationOn">
                            <div id="notification_status" class="notificationOn"></div>
                            <div id="notification_desc" class=""></div>
                        </td>
                        <td width="30">
                            <div id="app_icon"
                                 style="cursor:pointer;padding-right:10px;font-size:12px;font-weight:bold;color:#07C503">
                                App
                            </div>
                            <div id="app_link_table"
                                 style="display:none;width:325px;height:360px;position:absolute;background-color:rgb(35, 38, 41);z-index:10;margin-top:13px;margin-left:-170px;;border-radius:5px;box-shadow:3px 3px 4px #000;opacity:.95">
                                <div style="padding:10px;">
                                    <div id="cancel_app"
                                         style="width:20px;height:20px;background:url(button-close.png') no-repeat;position:absolute;right:10px;"></div>
                                </div>
                                <div style="padding:10px;border-bottom:1px solid #666;">
                                    <div style="display:table-cell;vertical-align:middle;padding-left:10px;">
                                        <div style="width:75px;height:75px;background:url('asus_router.png') no-repeat;"></div>
                                    </div>
                                    <div style="display:table-cell;">
                                        <div style="padding:5px 0 5px 15px;font-size:22px;">ASUS Router</div>
                                        <div style="padding:5px 0 5px 15px;font-size:14px;color:#BDBDBD">ASUS Router
                                            是一款帮助您管理家庭网络的革命性应用程序。
                                        </div>
                                    </div>
                                </div>
                                <div style="padding:20px 10px;">
                                    <div style="display:table-cell;vertical-align:middle;padding-left:10px;">
                                        <div><img src="asus_router_android_qr.png" style="width:75px;height:75px;">
                                        </div>
                                    </div>
                                    <div style="display:table-cell;vertical-align:middle;width:100%;text-align:center">
                                        <div style="padding-left: 30px;"><a
                                                href="https://play.google.com/store/apps/details?id=com.asus.aihome"
                                                target="_blank">
                                            <div style="width:172px;height:60px;background:url(googleplay.png') no-repeat;"></div>
                                        </a></div>
                                    </div>
                                </div>
                                <div style="padding:20px 10px;">
                                    <div style="display:table-cell;vertical-align:middle;padding-left:10px;">
                                        <div><img src="asus_router_ios_qr.png" style="width:75px;height:75px;"></div>
                                    </div>
                                    <div style="display:table-cell;vertical-align:middle;width:100%;text-align:center">
                                        <div style="padding-left: 30px;"><a
                                                href="https://itunes.apple.com/tw/app/asus-router/id1033794044"
                                                target="_blank">
                                            <div style="width:172px;height:51px;background:url(AppStore.png') no-repeat;"></div>
                                        </a></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td width="30">
                            <div id="bwdpi_status" class="bwdpistatus_game"></div>
                        </td>
                        <td width="30">
                            <div id="guestnetwork_status" style="width:30px;" class="guestnetworkstatusoff"></div>
                        </td>
                        <td width="30">
                            <div id="connect_status" class="connectstatuson"></div>
                        </td>
                        <td width="17"></td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div id="Loading" class="popup_bg">
    <table cellpadding="5" cellspacing="0" id="loadingBlock" class="loadingBlock" align="center">
        <tbody>
        <tr>
            <td width="20%" height="80" align="center"><img src="loading.gif"></td>
            <td><span id="proceeding_main_txt">请稍候，</span><span id="proceeding_txt" style="color:#FFFFCC;"></span></td>
        </tr>
        </tbody>
    </table>
    <!--[if lte IE 6.5]>
    <iframe class="hackiframe"></iframe><![endif]--></div>
<div id="hiddenMask" class="popup_bg" style="z-index:999;">
    <table cellpadding="5" cellspacing="0" id="dr_sweet_advise" class="dr_sweet_advise" align="center"></table>
    <!--[if lte IE 6.5]>
    <iframe class="hackiframe"></iframe><![endif]--></div>
<iframe name="hidden_frame" id="hidden_frame" width="0" height="0" frameborder="0"></iframe>
<form method="post" name="form" action="http://router.asus.com/start_apply.htm" target="hidden_frame">
    <table class="content" align="center" cellpadding="0" cellspacing="0">
        <tbody>
        <tr>
            <td width="17">&nbsp;</td>
            <td valign="top" width="202">
                <div id="mainMenu">
                    <div style="margin-top:-172px">
                        <div class="menu menu_QIS_title" title="QIS_wizard.htm" id="QIS_wizard_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_QIS"></div>
                                    </td>
                                    <td class="menu_Desc">网络设置向导</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu_Split">
                            <table width="192px" height="30px">
                                <tbody>
                                <tr>
                                    <td>一般设置</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="index.asp" id="index_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_Index"></div>
                                    </td>
                                    <td class="menu_Desc">网络地图</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Guest_network.asp" id="Guest_network_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_GuestNetwork"></div>
                                    </td>
                                    <td class="menu_Desc">访客网络</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="AiProtection_HomeSecurity.asp" id="AiProtection_HomeSecurity_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_AiProtection"></div>
                                    </td>
                                    <td class="menu_Desc">AiProtection 智能网络卫士</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu menuClicked" title="AdaptiveQoS_Bandwidth_Monitor.asp"
                             id="AdaptiveQoS_Bandwidth_Monitor_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_BandwidthMonitor"></div>
                                    </td>
                                    <td class="menu_Desc">网络监控家 Adaptive QoS</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="TrafficAnalyzer_Statistic.asp" id="TrafficAnalyzer_Statistic_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_TrafficAnalyzer"></div>
                                    </td>
                                    <td class="menu_Desc">Traffic Analyzer 流量分析</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu_Split">
                            <table width="192px" height="30px">
                                <tbody>
                                <tr>
                                    <td>高级设置</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_Wireless_Content.asp" id="Advanced_Wireless_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_Wireless"></div>
                                    </td>
                                    <td class="menu_Desc">无线网络</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_LAN_Content.asp" id="Advanced_LAN_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_LAN"></div>
                                    </td>
                                    <td class="menu_Desc">内部网络(LAN)</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_WAN_Content.asp" id="Advanced_WAN_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_WAN"></div>
                                    </td>
                                    <td class="menu_Desc">外部网络(WAN)</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_Smart_Home_Alexa.asp" id="Advanced_Smart_Home_Alexa_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_Alexa_IFTTT"></div>
                                    </td>
                                    <td class="menu_Desc">Amazon Alexa</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_IPv6_Content.asp" id="Advanced_IPv6_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_IPv6"></div>
                                    </td>
                                    <td class="menu_Desc">IPv6</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_VPN_PPTP.asp" id="Advanced_VPN_PPTP_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_VPN"></div>
                                    </td>
                                    <td class="menu_Desc">VPN</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_BasicFirewall_Content.asp"
                             id="Advanced_BasicFirewall_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_Firewall"></div>
                                    </td>
                                    <td class="menu_Desc">防火墙</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Advanced_OperationMode_Content.asp"
                             id="Advanced_OperationMode_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_Setting"></div>
                                    </td>
                                    <td class="menu_Desc">系统管理</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Main_LogStatus_Content.asp" id="Main_LogStatus_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_Log"></div>
                                    </td>
                                    <td class="menu_Desc">系统记录</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="menu" title="Main_Analysis_Content.asp" id="Main_Analysis_Content_menu">
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="menu_Icon menu_NekworkTool"></div>
                                    </td>
                                    <td class="menu_Desc">网络工具</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="subMenu"></div>
            </td>
            <td valign="top">
                <div style="margin-top: -140px;">
                    <div id="tabMenu" class="submenuBlock">
                        <div>
                            <table>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="tabClicked" title="AdaptiveQoS_Bandwidth_Monitor.asp"
                                             id="AdaptiveQoS_Bandwidth_Monitor_tab"><span>带宽监控</span></div>
                                    </td>
                                    <td>
                                        <div class="tab" title="QoS_EZQoS.asp" id="QoS_EZQoS_tab"><span>带宽管理 QoS</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="tab" title="AdaptiveQoS_WebHistory.asp"
                                             id="AdaptiveQoS_WebHistory_tab"><span>网页浏览历史</span></div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <table width="95%" border="0" align="left" cellpadding="0" cellspacing="0" class="FormTitle"
                           id="FormTitle" style="height: 785px;">
                        <tbody>
                        <tr>
                            <td bgcolor="#4D595D" valign="top">
                                <table width="760px" border="0" cellpadding="4" cellspacing="0">
                                    <tbody>
                                    <tr>
                                        <td bgcolor="#4D595D" valign="top">
                                            <table width="100%">
                                                <tbody>
                                                <tr>
                                                    <td class="formfonttitle" align="left">
                                                        <div>带宽管理 QoS - WAN / LAN 带宽监控</div>
                                                    </td>
                                                    <td>
                                                        <div style="display:flex;align-items: center;">
                                                            <div style="font-size: 14px;margin-right:8px;">显示方式</div>
                                                            <div><select class="input_option" id="traffic_unit"
                                                                         onchange="setUnit(this.value);">
                                                                <option value="100">100 Mbps</option>
                                                                <option value="1000">1 Gbps</option>
                                                                <option value="10000">10 Gbps</option>
                                                                <option value="0" selected="">自动</option>
                                                            </select></div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <table align="right">
                                                                <tbody>
                                                                <tr>
                                                                    <td>
                                                                        <div class="formfonttitle"
                                                                             style="margin-bottom:0px;margin-left:50px;"
                                                                             title="启用应用程序分析让您通过点击设备图标即可显示每台设备的所有应用程序流量，对客户端进行详细监控。">
                                                                            应用程序分析
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <div align="center" class="left"
                                                                             style="width:94px; float:left; cursor:pointer;"
                                                                             id="apps_analysis_enable">
                                                                            <div class="iphone_switch_container"
                                                                                 style="height:32px; width:74px; position: relative; overflow: hidden">
                                                                                <img id="iphone_switch"
                                                                                     class="iphone_switch"
                                                                                     src="iphone_switch_container_on.png"
                                                                                     style="border-radius:7px;height:32px; width:74px; background-image:url(iphone_switch.png); background-repeat:no-repeat; background-position:0px">
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="5" bgcolor="#4D595D" valign="top">
                                            <div style="margin: 2px auto;" class="splitLine"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div>
                                                <table style="width:99%;">
                                                    <tbody>
                                                    <tr>
                                                        <td id="upload_unit" style="width:50%;">
                                                            <div style="margin:-10px 0 5px 70px;font-size:16px;text-align:center;">
                                                                上传带宽
                                                            </div>
                                                            <div style="position:absolute;margin:12px 0px 0px 112px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:-8px 0px 0px 222px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:50px 0px 0px 300px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:121px 0px 0px 296px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:150px 0px 0px 275px;font-size:16px;display:none;"></div>
                                                            <div id="upload_speed"
                                                                 style="position:absolute;margin:147px 0px 0px 187px;font-size:24px;width:60px;text-align:center;">
                                                                1.18
                                                            </div>
                                                            <div id="upload_speed_meter_bg" class="speed-meter-100"
                                                                 style="height:188px;width:270px;background-repeat:no-repeat;margin:-10px 0px 0px 70px"></div>
                                                            <div id="indicator_upload" class="transition_style"
                                                                 style="background-image: url(&quot;indicator.png&quot;); position: absolute; height: 100px; width: 50px; background-repeat: no-repeat; margin: -110px 0px 0px 194px; transform: rotate(-88.5deg);"></div>
                                                        </td>
                                                        <td id="download_unit">
                                                            <div style="margin:-10px 0 5px -55px;font-size:16px;text-align:center;">
                                                                下载带宽
                                                            </div>
                                                            <div style="position:absolute;margin:12px 0px 0px 88px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:-6px 0px 0px 203px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:50px 0px 0px 275px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:120px 0px 0px 270px;font-size:16px;display:none;"></div>
                                                            <div style="position:absolute;margin:150px 0px 0px 250px;font-size:16px;display:none;"></div>
                                                            <div id="download_speed"
                                                                 style="position:absolute;margin:147px 0px 0px 130px;font-size:24px;text-align:center;width:60px;">
                                                                5.84
                                                            </div>
                                                            <div id="download_speed_meter_bg" class="speed-meter-100"
                                                                 style="height:188px;width:270px;background-repeat:no-repeat;margin:-10px 0px 0px 10px"></div>
                                                            <div id="indicator_download" class="transition_style"
                                                                 style="background-image: url(&quot;indicator.png&quot;); position: absolute; height: 100px; width: 50px; background-repeat: no-repeat; margin: -110px 0px 0px 133px; transform: rotate(-53.8deg);"></div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div style="margin:-5px 0px;">
                                                <table>
                                                    <tbody>
                                                    <tr>
                                                        <td colspan="2">
                                                            <div style="display:flex;align-items: center;justify-content: flex-end;margin-right:8px;">
                                                                <div style="font-size:14px;margin-right:8px;">显示单位</div>
                                                                <div><select class="input_option" id="scale_unit">
                                                                    <option value="0">Kb</option>
                                                                    <option value="1">Mb</option>
                                                                    <option value="9" selected="">自动</option>
                                                                </select></div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="block_all"
                                                            style="width:50%;font-family: Arial, Helvetica, sans-serif;text-align:left;padding-left:15px;visibility:hidden;">
                                                            <div style="cursor:pointer;width:113px;border-radius:10px;text-align:center;box-shadow:0px 2px black;">
                                                                <table>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="qos_tab"
                                                                                 style="width:110px;border-radius:10px;">
                                                                                全显示
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div id="priority_block">
                                                                <table>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td>
                                                                            <div id="0" class="qos_tab ui-draggable"
                                                                                 style="cursor:pointer;width:100px;border-radius:10px;text-align:center;box-shadow:0px 2px black;z-index:100;">
                                                                                <table>
                                                                                    <tbody>
                                                                                    <tr>
                                                                                        <td style="width:25px;">
                                                                                            <div style="width:12px;height:12px;border-radius:10px;background-color:#F01F09;margin-left:5px;"></div>
                                                                                        </td>
                                                                                        <td>最高</td>
                                                                                    </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <div id="1" class="qos_tab ui-draggable"
                                                                                 style="cursor:pointer;width:90px;border-radius:10px;text-align:center;box-shadow:0px 2px black;z-index:100;">
                                                                                <table>
                                                                                    <tbody>
                                                                                    <tr>
                                                                                        <td style="width:25px;">
                                                                                            <div style="width:12px;height:12px;border-radius:10px;background-color:#F08C09;margin-left:5px;"></div>
                                                                                        </td>
                                                                                        <td>高</td>
                                                                                    </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <div id="2" class="qos_tab ui-draggable"
                                                                                 style="cursor:pointer;width:90px;border-radius:10px;text-align:center;box-shadow:0px 2px black;z-index:100;">
                                                                                <table>
                                                                                    <tbody>
                                                                                    <tr>
                                                                                        <td style="width:25px;">
                                                                                            <div style="width:12px;height:12px;border-radius:10px;background-color:#F3DD09;margin-left:5px;"></div>
                                                                                        </td>
                                                                                        <td>中</td>
                                                                                    </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <div id="3" class="qos_tab ui-draggable"
                                                                                 style="cursor:pointer;width:90px;border-radius:10px;text-align:center;box-shadow:0px 2px black;z-index:100;">
                                                                                <table>
                                                                                    <tbody>
                                                                                    <tr>
                                                                                        <td style="width:25px;">
                                                                                            <div style="width:12px;height:12px;border-radius:10px;background-color:#7A797A;margin-left:5px;"></div>
                                                                                        </td>
                                                                                        <td>默认值</td>
                                                                                    </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <div id="4" class="qos_tab ui-draggable"
                                                                                 style="cursor:pointer;width:100px;border-radius:10px;text-align:center;box-shadow:0px 2px black;z-index:100;">
                                                                                <table>
                                                                                    <tbody>
                                                                                    <tr>
                                                                                        <td style="width:25px;">
                                                                                            <div style="width:12px;height:12px;border-radius:10px;background-color:#58CCED;margin-left:5px;"></div>
                                                                                        </td>
                                                                                        <td>最低</td>
                                                                                    </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div colspan="2" class="monitor_qos_bg"
                                                 style="width:99%;height:390px;border-radius:4px;margin-left:4px;overflow:auto;">
                                                <div id="sortable" style="padding-top:5px;" class="ui-sortable">
                                                    <div>
                                                        <table>
                                                            <tbody>
                                                            <tr id="icon_tr_2" class="ui-droppable">
                                                                <td style="width:70px;height:60px;">
                                                                    <div id="icon_2"
                                                                         class="closed clientIcon type9 qosLevel"></div>
                                                                </td>
                                                                <td style="width:180px;">
                                                                    <div style="font-family:monospace, Courier New, Courier;"
                                                                         title="FF:FF:FF:FF:FF:FF">MEIZU-PHONE
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div>
                                                                        <table>
                                                                            <tbody>
                                                                            <tr>
                                                                                <td style="width:385px">
                                                                                    <div style="height:8px;background-color:#000;border-radius:10px;">
                                                                                        <div id="FF:FF:FF:FF:FF:FF_upload_bar"
                                                                                             class="traffic_bar transition_style"
                                                                                             style="width: 1.8%;"></div>
                                                                                    </div>
                                                                                </td>
                                                                                <td style="text-align:right;">
                                                                                    <div id="FF:FF:FF:FF:FF:FF_upload"
                                                                                         style="width:80px;">1.18
                                                                                    </div>
                                                                                </td>
                                                                                <td style="width:20px;">
                                                                                    <div id="FF:FF:FF:FF:FF:FF_upload_unit">
                                                                                        Kb
                                                                                    </div>
                                                                                </td>
                                                                                <td style="width:20px;">
                                                                                    <div class="arrow_up"
                                                                                         style="width:0;height:0;border-width:0 7px 10px 7px;border-style:solid;"></div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td>
                                                                                    <div style="height:8px;background-color:#000;border-radius:10px;">
                                                                                        <div id="FF:FF:FF:FF:FF:FF_download_bar"
                                                                                             class="traffic_bar transition_style"
                                                                                             style="width: 5.18%;"></div>
                                                                                    </div>
                                                                                </td>
                                                                                <td style="text-align:right;">
                                                                                    <div id="FF:FF:FF:FF:FF:FF_download"
                                                                                         style="width:80px;">5.48
                                                                                    </div>
                                                                                </td>
                                                                                <td style="width:20px;">
                                                                                    <div id="FF:FF:FF:FF:FF:FF_download_unit">
                                                                                        Kb
                                                                                    </div>
                                                                                </td>
                                                                                <td style="width:20px;">
                                                                                    <div class="arrow_down"
                                                                                         style="width:0;height:0;border-width:10px 7px 0 7px;border-style:solid;"></div>
                                                                                </td>
                                                                            </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                        <div class="splitLine"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div style=" *width:136px;margin:5px 0px 0px 300px;" class="titlebtn"
                                                 align="center"><span>应用本页面设置</span>
                                                <div style="margin:-30px 0 0px -290px;width:200px;"><a id="faq"
                                                                                                       href="https://www.asus.com.cn/support/FAQ/1008717"
                                                                                                       style="text-decoration:underline;"
                                                                                                       target="_blank">WAN
                                                    / LAN 带宽监控 FAQ</a></div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="footer">
        <div align="center" class="bottom-image"></div>
        <div align="center" class="copyright">2020 版权属于 华硕电脑股份有限公司</div>
        <br>
        <div style="margin-top:-75px;margin-left:205px;">
            <table width="765px" border="0" align="center" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td width="20" align="right">
                        <div id="bottom_help_icon" style="margin-right:3px;"></div>
                    </td>
                    <td width="110" id="bottom_help_title" align="left">帮助 &amp; 支持</td>
                    <td width="335" id="bottom_help_link" align="left"><a
                            style="font-weight: bolder;text-decoration:underline;cursor:pointer;"
                            href="https://www.asus.com.cn/Networking/Lyra/HelpDesk_Manual/?utm_source=asus-product&amp;utm_medium=referral&amp;utm_campaign=router"
                            target="_blank">使用手册</a>&nbsp;|&nbsp;<a
                            style="font-weight: bolder;text-decoration:underline;cursor:pointer;"
                            href="https://www.asus.com.cn/Networking/Lyra/HelpDesk_Download/?utm_source=asus-product&amp;utm_medium=referral&amp;utm_campaign=router"
                            target="_blank">应用程序</a>&nbsp;|&nbsp;<a id="registration_link" target="_blank"
                                                                    href="https://account.asus.com/"
                                                                    style="font-weight: bolder;text-decoration:underline;cursor:pointer;">产品注册</a>&nbsp;|&nbsp;<a
                            id="fb_link"
                            href="http://router.asus.com/Advanced_Feedback.asp?origPage=AdaptiveQoS_Bandwidth_Monitor.asp"
                            target="_self"
                            style="font-weight: bolder;text-decoration:underline;cursor:pointer;">问题回报</a></td>
                    <td width="270" id="bottom_help_FAQ" align="right"
                        style="font-family:Arial, Helvetica, sans-serif;">FAQ&nbsp;&nbsp;<input type="text"
                                                                                                id="FAQ_input"
                                                                                                class="input_FAQ_table"
                                                                                                maxlength="40"
                                                                                                autocorrect="off"
                                                                                                autocapitalize="off">
                    </td>
                    <td width="30" align="left">
                        <div id="bottom_help_FAQ_icon" class="bottom_help_FAQ_icon"
                             style="cursor:pointer;margin-left:3px;" target="_blank"></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</form>
<script>
    $.ajaxSetup({
        beforeSend: function () {
            console.log(arguments);//我们先来看看这里面有什么好玩的东西
        }
    });
</script>
<script>
    AUTOLOGOUT_MAX_MINUTE = 0;
    var detect_interval = 2; // get information per second
    var device_time_flag = "";
    var router_traffic_old = new Array();
    var scale = [1, 5, 10, 20, 30, 50, 75, 100];
    var download_maximum = 100 * 1024;
    var upload_maximum = 100 * 1024;
    var clientList = new Array(0);
    var array_traffic = new Array();
    var router_traffic = new Array();
    var client_traffic_old = new Array();

    function toNum(m) {
        return Math.floor(Math.random() * (m - 0 + 1) + 0)
    }

    function update_device_tarffic() {
        clientList = {"FF:FF:FF:FF:FF:FF": {"isOnline": true}}
        var upNum = toNum(100000000);
        var doNum = toNum(100000000);
        array_traffic = [["FF:FF:FF:FF:FF:FF", upNum, doNum]];
        router_traffic = [upNum, doNum];

        calculate_router_traffic(router_traffic);
        calculate_traffic(array_traffic);
        device_time_flag = setTimeout("update_device_tarffic();", detect_interval * 1000);
    }

    function calculate_router_traffic(traffic) {
        router_traffic_new = new Array();
        router_traffic_new = traffic;
        var tx = 0;
        var rx = 0;
        if (!router_traffic_old) {
            router_traffic_old = [0, 0];
        }
        if ((router_traffic_new[0] - router_traffic_old[0]) < 0) { // to control overflow issue
        } else {
            tx = router_traffic_new[0] - router_traffic_old[0];
        }
        if ((router_traffic_new[1] - router_traffic_old[1]) < 0) {
        } else {
            rx = router_traffic_new[1] - router_traffic_old[1];
        }
        tx = tx * 8 / detect_interval; // translate to bits
        rx = rx * 8 / detect_interval;
        var tx_kb = tx / 1024;
        var rx_kb = rx / 1024;
        var tx_mb = tx / 1024 / 1024;
        var rx_mb = rx / 1024 / 1024;
        var angle = 0;
        var rotate = "";
        /* angle mapping table: [0M: -123deg, 1M: -90deg, 5M: -58deg, 10M: -33deg, 20M: -1deg, 30M: 30deg, 50M: 58deg, 75M: 88deg, 100M: 122deg]*/
        if (router_traffic_old.length != 0) {
            document.getElementById('upload_speed').innerHTML = tx_mb.toFixed(2);
            if (tx_mb <= scale[0]) {
                angle = ((tx_mb / scale[0]) * 33) + (-123);
            } else if (tx_mb > scale[0] && tx_mb <= scale[1]) {
                angle = ((tx_mb - scale[0]) / (scale[1] - scale[0])) * 32 + 33 + (-123);
            } else if (tx_mb > scale[1] && tx_mb <= scale[2]) {
                angle = ((tx_mb - scale[1]) / (scale[2] - scale[1])) * 25 + (33 + 32) + (-123);
            } else if (tx_mb > scale[2] && tx_mb <= scale[3]) {
                angle = ((tx_mb - scale[2]) / (scale[3] - scale[2])) * 32 + (33 + 32 + 25) + (-123)
            } else if (tx_mb > scale[3] && tx_mb <= scale[4]) {
                angle = ((tx_mb - scale[3]) / (scale[4] - scale[3])) * 31 + (33 + 32 + 25 + 32) + (-123);
            } else if (tx_mb > scale[4] && tx_mb <= scale[5]) {
                angle = ((tx_mb - scale[4]) / (scale[5] - scale[4])) * 28 + (33 + 32 + 25 + 32 + 31) + (-123);
            } else if (tx_mb > scale[5] && tx_mb <= scale[6]) {
                angle = ((rx_mb - scale[5]) / (scale[6] - scale[5])) * 30 + (33 + 32 + 25 + 32 + 31 + 28) + (-123);
            } else if (tx_mb > scale[6] && tx_mb <= scale[7]) {
                angle = ((tx_mb - scale[6]) / (scale[7] - scale[6])) * 34 + (33 + 32 + 25 + 32 + 31 + 28 + 30) + (-123);
            } else { // exception case temporally, download traffic exceed 100 Mb or 1000 Mb.
                angle = 123;
            }
            rotate = "rotate(" + angle.toFixed(1) + "deg)";
            $('#indicator_upload').css({
                "-webkit-transform": rotate,
                "-moz-transform": rotate,
                "-o-transform": rotate,
                "msTransform": rotate,
                "transform": rotate
            });
            document.getElementById('download_speed').innerHTML = rx_mb.toFixed(2);
            if (rx_mb <= scale[0]) {
                angle = ((rx_mb / scale[0]) * 33) + (-123);
            } else if (rx_mb > scale[0] && rx_mb <= scale[1]) {
                angle = ((rx_mb - scale[0]) / (scale[1] - scale[0])) * 32 + 33 + (-123);
            } else if (rx_mb > scale[1] && rx_mb <= scale[2]) {
                angle = ((rx_mb - scale[1]) / (scale[2] - scale[1])) * 25 + (33 + 32) + (-123);
            } else if (rx_mb > scale[2] && rx_mb <= scale[3]) {
                angle = ((rx_mb - scale[2]) / (scale[3] - scale[2])) * 32 + (33 + 32 + 25) + (-123)
            } else if (rx_mb > scale[3] && rx_mb <= scale[4]) {
                angle = ((rx_mb - scale[3]) / (scale[4] - scale[3])) * 31 + (33 + 32 + 25 + 32) + (-123);
            } else if (rx_mb > scale[4] && rx_mb <= scale[5]) {
                angle = ((rx_mb - scale[4]) / (scale[5] - scale[4])) * 28 + (33 + 32 + 25 + 32 + 31) + (-123);
            } else if (rx_mb > scale[5] && rx_mb <= scale[6]) {
                angle = ((rx_mb - scale[5]) / (scale[6] - scale[5])) * 30 + (33 + 32 + 25 + 32 + 31 + 28) + (-123);
            } else if (rx_mb > scale[6] && rx_mb <= scale[7]) {
                angle = ((rx_mb - scale[6]) / (scale[7] - scale[6])) * 34 + (33 + 32 + 25 + 32 + 31 + 28 + 30) + (-123);
            } else { // exception case temporally, download traffic exceed 100 Mb or 1000 Mb.
                angle = 123;
            }
            rotate = "rotate(" + angle.toFixed(1) + "deg)";
            $('#indicator_download').css({
                "-webkit-transform": rotate,
                "-moz-transform": rotate,
                "-o-transform": rotate,
                "msTransform": rotate,
                "transform": rotate
            });
        }
        router_traffic_old = [];
        router_traffic_old = router_traffic_new;
    }

    function calculate_traffic(array_traffic) {
        var client_traffic_new = new Array();
        var unit = getTrafficUnit();
        for (i = 0; i < array_traffic.length; i++) {
            if (typeof (clientList[array_traffic[i][0]]) != "undefined" && clientList[array_traffic[i][0]].isOnline) {
                client_traffic_new.push(array_traffic[i][0]);
                client_traffic_new[array_traffic[i][0]] = {"tx": array_traffic[i][1], "rx": array_traffic[i][2]};
            }
        }
        for (i = 0; i < client_traffic_new.length; i++) {
            if (client_traffic_old.length != 0) {
                var diff_tx = 0;
                var diff_rx = 0;
                var diff_tx_kb = 0;
                var diff_rx_kb = 0;
                var diff_tx_mb = 0;
                var diff_rx_mb = 0;
                var tx_width = 0;
                var rx_width = 0;
                if (client_traffic_old[client_traffic_new[i]]) {
                    if ((client_traffic_new[client_traffic_new[i]].tx - client_traffic_old[client_traffic_new[i]].tx) < 0) {
                    } else {
                        diff_tx = client_traffic_new[client_traffic_new[i]].tx - client_traffic_old[client_traffic_new[i]].tx;
                    }
                } else {
                    diff_tx = 0;
                }
                if (client_traffic_old[client_traffic_new[i]]) {
                    if ((client_traffic_new[client_traffic_new[i]].rx - client_traffic_old[client_traffic_new[i]].rx) < 0) {
                    } else {
                        diff_rx = client_traffic_new[client_traffic_new[i]].rx - client_traffic_old[client_traffic_new[i]].rx;
                    }
                } else {
                    diff_rx = 0;
                }
                diff_tx = diff_tx * 8 / detect_interval;
                diff_rx = diff_rx * 8 / detect_interval;
                diff_tx_kb = diff_tx / 1024;
                diff_rx_kb = diff_rx / 1024;
                diff_tx_mb = diff_tx / 1024 / 1024;
                diff_rx_mb = diff_rx / 1024 / 1024;
                if ((diff_tx / 1024) < upload_maximum / 5) {
                    if (diff_tx == 0) {
                        try {
                            document.getElementById(client_traffic_new[i] + '_upload_bar').style.width = "0%";
                        } catch (e) {
                            console.log("[" + i + "] " + client_traffic_new[i]);
                            continue;
                        }
                    } else {
                        tx_width = parseInt(diff_tx_kb / (upload_maximum / 5) * 30);
                        if (unit == '0') {
                            if (diff_tx_kb.toFixed(2) >= 0.01 && tx_width < 1) {
                                tx_width = 1;
                            }
                        } else if (unit == '1') {
                            if (diff_tx_mb.toFixed(2) >= 0.01 && tx_width < 1) {
                                tx_width = 1;
                            }
                        } else {
                            if (diff_tx_kb.toFixed(2) >= 0.01 && tx_width < 1) {
                                tx_width = 1;
                            }
                        }
                        if (document.getElementById(client_traffic_new[i] + '_upload_bar') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload_bar') != null) {
                            document.getElementById(client_traffic_new[i] + '_upload_bar').style.width = tx_width + "%";
                        }
                    }
                    if (unit == '0') {
                        if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_kb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Kb";
                        }
                    } else if (unit == '1') {
                        if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        }
                    } else { // unit = 9, Flexbile
                        if (diff_tx_kb < 1024) {
                            if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                                document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_kb.toFixed(2);
                                document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Kb";
                            }
                        } else {
                            if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                                document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2);
                                document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                            }
                        }
                    }
                } else if ((diff_tx_kb >= upload_maximum / 5) && (diff_tx_kb < upload_maximum * 2 / 5)) {
                    tx_width = parseInt((diff_tx_kb - (upload_maximum / 5)) / (upload_maximum / 5) * 25);
                    tx_width += 30;
                    if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                        document.getElementById(client_traffic_new[i] + '_upload_bar').style.width = tx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_kb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        }
                    }
                } else if ((diff_tx_kb >= upload_maximum * 2 / 5) && (diff_tx_kb < upload_maximum * 3 / 5)) {
                    tx_width = parseInt((diff_tx_kb - (upload_maximum * 2 / 5)) / (upload_maximum / 5) * 20);
                    tx_width += 55;
                    if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                        document.getElementById(client_traffic_new[i] + '_upload_bar').style.width = tx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_kb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        }
                    }
                } else if ((diff_tx_kb >= upload_maximum * 3 / 5) && (diff_tx_kb < upload_maximum * 4 / 5)) {
                    tx_width = parseInt((diff_tx_kb - (upload_maximum * 3 / 5)) / (upload_maximum / 5) * 15);
                    tx_width += 75;
                    if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                        document.getElementById(client_traffic_new[i] + '_upload_bar').style.width = tx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_kb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        }
                    }
                } else {
                    tx_width = parseInt((diff_tx_kb - (upload_maximum * 4 / 5)) / (upload_maximum / 5) * 15);
                    tx_width += 90;
                    if (tx_width > 100)
                        tx_width = 100;
                    if (document.getElementById(client_traffic_new[i] + '_upload') != "undefined" && document.getElementById(client_traffic_new[i] + '_upload') != null) {
                        document.getElementById(client_traffic_new[i] + '_upload_bar').style.width = tx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_kb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_upload').innerHTML = diff_tx_mb.toFixed(2)
                            document.getElementById(client_traffic_new[i] + '_upload_unit').innerHTML = "Mb";
                        }
                    }
                }
                if (diff_rx_kb < download_maximum / 5) { //30%
                    if (diff_rx == 0) {
                        try {
                            document.getElementById(client_traffic_new[i] + '_download_bar').style.width = "0%";
                        } catch (e) {
                            console.log("[" + i + "] " + client_traffic_new[i]);
                            continue;
                        }
                    } else {
                        rx_width = parseInt(diff_rx_kb / (download_maximum / 5) * 30);
                        if (unit == '0') {
                            if (diff_rx_kb.toFixed(2) >= 0.01 && rx_width < 1) {
                                rx_width = 1;
                            }
                        } else if (unit == '1') {
                            if (diff_rx_mb.toFixed(2) >= 0.01 && rx_width < 1) {
                                rx_width = 1;
                            }
                        } else {
                            if (diff_rx_kb.toFixed(2) >= 0.01 && rx_width < 1) {
                                rx_width = 1;
                            }
                        }
                        if (document.getElementById(client_traffic_new[i] + '_download_bar') != "undefined" && document.getElementById(client_traffic_new[i] + '_download_bar') != null) {
                            document.getElementById(client_traffic_new[i] + '_download_bar').style.width = rx_width + "%";
                        }
                    }
                    if (unit == '0') {
                        if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_kb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Kb";
                        }
                    } else if (unit == '1') {
                        if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        }
                    } else {
                        if (diff_rx_kb < 1024) {
                            if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                                document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_kb.toFixed(1);
                                document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Kb";
                            }
                        } else {
                            if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                                document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                                document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                            }
                        }
                    }
                } else if ((diff_rx_kb >= download_maximum / 5) && (diff_rx_kb < download_maximum * 2 / 5)) { // 25%
                    rx_width = parseInt((diff_rx_kb - (download_maximum / 5)) / (download_maximum / 5) * 25);
                    rx_width += 30;
                    if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                        document.getElementById(client_traffic_new[i] + '_download_bar').style.width = rx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_kb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        }
                    }
                } else if ((diff_rx_kb >= download_maximum * 2 / 5) && (diff_rx_kb < download_maximum * 3 / 5)) { // 20%
                    rx_width = parseInt((diff_rx_kb - (download_maximum * 2 / 5)) / (download_maximum / 5) * 20);
                    rx_width += 55;
                    if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                        document.getElementById(client_traffic_new[i] + '_download_bar').style.width = rx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_kb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        }
                    }
                } else if ((diff_rx_kb >= download_maximum * 3 / 5) && (diff_rx_kb < download_maximum * 4 / 5)) { // 15%
                    rx_width = parseInt((diff_rx_kb - (download_maximum * 3 / 5)) / (download_maximum / 5) * 15);
                    rx_width += 75;
                    if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                        document.getElementById(client_traffic_new[i] + '_download_bar').style.width = rx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_kb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        }
                    }
                } else { //10%
                    rx_width = parseInt((diff_rx_kb - (download_maximum * 4 / 5)) / (download_maximum / 5) * 10);
                    rx_width += 90;
                    if (rx_width > 100)
                        rx_width = 100;
                    if (document.getElementById(client_traffic_new[i] + '_download') != "undefined" && document.getElementById(client_traffic_new[i] + '_download') != null) {
                        document.getElementById(client_traffic_new[i] + '_download_bar').style.width = rx_width + "%";
                        if (unit == '0') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_kb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Kb";
                        } else if (unit == '1') {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        } else {
                            document.getElementById(client_traffic_new[i] + '_download').innerHTML = diff_rx_mb.toFixed(2);
                            document.getElementById(client_traffic_new[i] + '_download_unit').innerHTML = "Mb";
                        }
                    }
                }
            }
        }
        client_traffic_old = [];
        client_traffic_old = client_traffic_new;
    }

    function getTrafficUnit() {
        var value = 9;
        if ($("#scale_unit").val()) {
            value = $("#scale_unit").val();
        }
        return value;
    }

    function setUnit(unit) {
        if (unit == '1000') { // 1 Gbps
            scale = [10, 50, 100, 200, 350, 500, 750, 1000];
            download_maximum = 1000 * 1024;
            upload_maximum = 1000 * 1024;
        } else if (unit == '10000') { // 10 Gbps
            scale = [500, 750, 1000, 2000, 3500, 5000, 7500, 10000];
            download_maximum = 10000 * 1024;
            upload_maximum = 10000 * 1024;
        } else if (unit == '100') { // 100 Mbps
            scale = [1, 5, 10, 20, 30, 50, 75, 100];
            download_maximum = 100 * 1024;
            upload_maximum = 100 * 1024;
        } else { // Auto
            scale = [1, 5, 10, 20, 30, 50, 75, 100];
            download_maximum = 100 * 1024;
            upload_maximum = 100 * 1024;
        }
    }

    update_device_tarffic();
</script>
</body>
</html>